import React, { useState } from "react";

import "./Ywxq.scss";
import "../../../static/font/iconfont.css";

import {
    Form,
    Input,
    Button,
    Select,
    Image,
    Modal,
    DatePicker,
    Upload,
    message
} from "antd";
import { ExclamationCircleOutlined } from "@ant-design/icons";
import ImgCrop from "antd-img-crop";

const { Option } = Select;
const { confirm } = Modal;
const { TextArea } = Input;
export const Ywxq = (props) => {
    const [form] = Form.useForm();

    const layout = {
        labelCol: {
            span: 6,
        },
        wrapperCol: {
            span: 14,
        },
    };

    //返回页面
    const backCar = () => {
        props.setYwxq(false);
    };
    //保存成功，然后跳转到原页面
    const save = () => {
        message.success('保存成功', [1]);
        setTimeout(() => {
            props.setYwxq(false);
        }, 1500);


    }
    const quxiao = () => {
        confirm({
            icon: <ExclamationCircleOutlined />,
            content: "您确定离开此页面吗？",
            cancelText: "取消",
            okText: "确定",
            onOk() {
                //   console.log('OK');
                backCar();
            },
            onCancel() {
                console.log("Cancel");
            },
        });
    };
    const onFinish = (values) => {
        console.log(values);
    };

    let text = JSON.parse(sessionStorage.getItem('gjtext'))
    console.log(text.name);
    form.setFieldsValue({
        name: text.name,
        bianhao: text.id,
        leixing: text.P_type,
        yunxing: text.P_time,

    })
    // 上传照片
    const [fileList, setFileList] = useState([
        {
            uid: "-1",
            name: "image.png",
            status: "done",
            url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
        },
    ]);

    const onChange = ({ fileList: newFileList }) => {
        setFileList(newFileList);
    };

    const onPreview = async (file) => {
        let src = file.url;
        if (!src) {
            src = await new Promise((resolve) => {
                const reader = new FileReader();
                reader.readAsDataURL(file.originFileObj);
                reader.onload = () => resolve(reader.result);
            });
        }
        const image = new Image();
        image.src = src;
        const imgWindow = window.open(src);
        imgWindow.document.write(image.outerHTML);
    };

    return (
        <div id="Zmdetails">
            <div className="xinzeng" style={{ padding: 0 }}>

                <div className="content" style={{ padding: 0 }}>
                    {/* 左边的框框 */}
                    <div>
                        <p>基本设备信息:</p>
                        <Form
                            {...layout}
                            form={form}
                            name="control-hooks"
                            onFinish={onFinish}
                        >
                            <Form.Item
                                name="name"
                                label="设备名称"
                                rules={[
                                    {
                                        required: true,
                                    },
                                ]}
                            >
                                <Input disabled />
                            </Form.Item>
                            <Form.Item
                                name="bianhao"
                                label="设备编号"
                                rules={[
                                    {
                                        required: true,
                                    },
                                ]}
                            >
                                <Input disabled />
                            </Form.Item>
                            <Form.Item
                                name="leixing"
                                label="设备类型"
                                rules={[
                                    {
                                        required: true,
                                    },
                                ]}
                            >
                                <Select placeholder="" allowClear disabled></Select>
                            </Form.Item>
                            <Form.Item
                                name="yunxing"
                                label="运行时间"
                                rules={[
                                    {
                                        required: true,
                                    },
                                ]}
                            >
                                <Input disabled />
                            </Form.Item>
                            <Form.Item
                                name="zhuantai"
                                label="运行状态"
                                rules={[
                                    {
                                        required: true,
                                    },
                                ]}
                            >
                                <Select placeholder="" allowClear></Select>
                            </Form.Item>
                            <Form.Item
                                name="people"
                                label="跟进人"
                                rules={[
                                    {
                                        required: true,
                                    },
                                ]}
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item
                                name="tel"
                                label="联系方式"
                                rules={[
                                    {
                                        required: true,
                                    },
                                ]}
                            >
                                <Input disabled />
                            </Form.Item>


                        </Form>
                    </div>
                    {/*右边的框框 */}
                    <div>
                        <p>设备详细信息:</p>
                        <div id="height_shangc1">
                            <div className="height_shangc">
                                {/* 处理结果区域 */}
                                <div className="hc" >
                                    <span style={{ width: '100px' }}>处理结果:</span>
                                    <TextArea
                                        rows={3}
                                        placeholder="请输入处理结果"
                                        style={{ height: '100px' }}
                                    />
                                </div>
                                {/* 现场照片区域 */}
                                <div className="hc">
                                    <span style={{ width: '100px' }}>现场照片:</span>
                                    <ImgCrop rotate>
                                        <Upload
                                            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                                            listType="picture-card"
                                            fileList={fileList}
                                            onChange={onChange}
                                            onPreview={onPreview}
                                        >
                                            {fileList.length < 5 &&
                                                "+ Upload"}
                                        </Upload>
                                    </ImgCrop>
                                    <Form style={{
                                        position: "relative",
                                        top: '160px',
                                        right: '650px'
                                    }}>
                                        <Form.Item >
                                            <div className="btn">
                                                <Button
                                                    type="primary"
                                                    htmlType="submit"
                                                    size="large"
                                                    style={{ width: '100px' }}
                                                    onClick={save}
                                                >
                                                    保存
                                                </Button>
                                                <Button size="large" style={{ width: '100px' }} onClick={quxiao}>
                                                    取消
                                                </Button>
                                            </div>
                                        </Form.Item>
                                    </Form>
                                </div>
                            </div>
                            <div className="content_card">
                                <p>告警详情:</p>
                                <div style={{ width: '650px', borderRadius: '6px', border: '1px solid grey', padding: '16px' }}>
                                    <div className="card_content">
                                        <p>
                                            告警位置：<span>A1幢右边地面围墙</span>
                                        </p>
                                        <p>
                                            告警内容：<span>体温38.5℃，超阈值</span>
                                        </p>
                                        <p>
                                            告警阈值:<span>体温37~37.5℃</span>
                                        </p>

                                    </div>
                                    <div className="card_content">
                                        <p>
                                            报警时间: <span>2022-02-24 13:14:58</span>
                                        </p>
                                        <p>
                                            持续时间: <span>2022-02-24 14:14:58</span>
                                        </p>
                                        <p>
                                            告警等级: <span>高</span>
                                        </p>
                                    </div>

                                </div>
                            </div>
                            <div className="content_card1">
                                <p>设备详情:</p>
                                <div style={{ width: '650px', borderRadius: '6px', border: '1px solid grey', padding: '16px' }}>
                                    <div className="card_content">
                                        <p >
                                            设备名称:<span style={{ marginRight: '85px' }}>围墙门禁</span>
                                        </p>
                                        <p>
                                            设备型号:<span style={{ marginRight: '55px' }}>ISIS-MJ-400</span>
                                        </p>
                                        <p>
                                            设备编号:<span>ISS20200818</span>
                                        </p>
                                    </div>
                                    <div className="card_content">
                                        <p>
                                            设备厂家: <span>XXX怡园科技有限公司</span>
                                        </p>
                                        <p>
                                            出场时间: <span>2022-02-24 14:14:58</span>
                                        </p>
                                        <p>
                                            产品版本: <span>V2.3</span>
                                        </p>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div >
    );
};
export default Ywxq;
